<script setup lang="ts">
import { radioEmits } from 'element-plus'
import { getOptions } from '../../../utils/index.ts'
import type { FormItemTool } from '../../../types/index.ts'

type IProps = {
  item: FormItemTool<'radio'>
  allDisabled: boolean
  isEditByRow: boolean
}
const { item, allDisabled, isEditByRow } = defineProps<IProps>()

const labelKey = computed(() => item?.config?.props?.label || 'label')
const valueKey = computed(() => item?.config?.props?.value || 'value')

const value = defineModel<any>('value')
const elRef = useTemplateRef('elRef')
const options = computed(() => {
  return getOptions(item)
})
const currentOption = computed(() => {
  return getOptions(item).find((option) => option[valueKey.value] === value.value)
})
const getRef = () => {
  return elRef.value
}
defineExpose({
  getRef,
})
defineEmits(radioEmits)
</script>
<template>
<span>
  <template v-if="isEditByRow">
    <el-radio-group
      ref="elRef"
      :disabled="allDisabled"
      v-model="value"
      v-bind="item.config"
      v-on="item.eventFunction || {}"
      v-if="item.isGroup"
    >
      <el-radio
        v-for="option in options"
        :key="option.key ?? option[valueKey]"
        :value="option[valueKey]"
        v-bind="item.optionConfig ?? {}"
      >
        {{ option[labelKey] }}
      </el-radio>
      <template v-for="slotName in item.slotNames" #[slotName]="slotData">
        <slot :name="slotName" :slotData="slotData"> </slot>
      </template>
    </el-radio-group>
    <template v-else>
      <el-radio
        v-for="option in options"
        v-model="value"
        :key="option.key ?? option[valueKey]"
        :disabled="allDisabled"
        v-bind="item.config"
        v-on="item.eventFunction || {}"
      >
        {{ option[labelKey] }}
      </el-radio>
    </template>
  </template>
  <span v-else>
    {{ currentOption?.[labelKey] ?? value ?? '' }}
  </span>
</span>
</template>

<style scoped lang="scss"></style>
